<template>
	<view class="content">
		<view class="wrapper">
			<picker @change="bindPickerChange" :value="index" mode="multiSelector" :range="array">
				<view class="car_title">{{array[0][index[0]]}}{{array[1][index[1]]}}</view>
			</picker>
			<input type="text" maxlength="6" v-model="carNum" placeholder="请输入车牌号" />
			<button class="check_btn" @click="checkPrice">{{btnTitle}}</button>
		</view>
		<view class="price_box">
			<span class="price_unit">￥</span>
			<span class="price_num">{{getPriceResult.price?getPriceResult.price:"0"}}</span>
		</view>
		<button :class="['pay_now',canPay?'':'btn_disabled']" :disabled="!canPay" @click="payNow">
			立即付款
		</button>
		<uni-popup ref="popup" @change="changePopup">
			<view class="login-popup">
				<view class="popup_title">
					授权登录申请
				</view>
				<view class="popup_tags">
					使用微信支付
				</view>
				<view class="now_login">
					<button @click="loginNow">立即登录</button>
				</view>
				<view class="close_btn" @click="closePopup">
					<image src="../../static/close.png" mode=""></image>
				</view>
			</view>
		</uni-popup>
		<view id='big_box'>

		</view>
		<!-- <button @click="wxAccredit">立即授权</button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carNum: '', //车牌号
				array: [
					[
						'鄂',
						'京',
						'津',
						'冀',
						'晋',
						'蒙',
						'辽',
						'吉',
						'黑',
						'沪',
						'苏',
						'浙',
						'皖',
						'闽',
						'赣',
						'鲁',
						'豫',
						'湘',
						'粤',
						'桂',
						'琼',
						'渝',
						'川',
						'黔',
						'滇',
						'藏',
						'陕',
						'甘',
						'青',
						'宁',
						'新',
						'台',
						'港',
						'澳'
					],
					['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
						'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
					]
				],
				index: [0, 0],
				priceObj: {
					parkid: '',
					gateid: '',
					pay_scene: '',
					car_number: ''
				},
				code: '',
				outType: '',
				getPriceResult: {

				}
			}
		},
		onLoad(options) {
			//判断浏览器类型
			this.checkEnvironment();
			console.log(options, '当前界面参数');
			this.priceObj.parkid = options.parkid;
			this.priceObj.gateid = options.gateid;
			this.priceObj.pay_scene = options.pay_scene;
			//如果不为0，则不需要输入车牌号，接口自动查询
			if (this.priceObj.pay_scene != 0) {
				this.outType = 'auto'
			}
			if (this.browserType == 'wxpay') {
				this.getCode(window.location.href);
				if (this.code.length && this.outType == 'auto') {
					this.checkPrice();
				}
			} else if (this.browserType == 'alipay') {
				console.log('支付宝');
				if (this.outType == 'auto') {
					this.checkPrice();
				}
			} else {
				console.log('请使用微信或者支付宝浏览器访问');
				uni.navigateTo({
					url: '/pages/query/tips'
				})
			}
			console.log(navigator.userAgent.toLowerCase(), '当前浏览器');
		},
		onReady() {
			setTimeout(() => {
				if (this.browserType == 'wxpay') {
					if (!this.code.length) {
						this.$refs.popup.open('center');
					}
				}

			}, 300)
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			checkPrice() {
				//如果是微信浏览器必须有code码，不然就直接跳转登录
				if (this.browserType == 'wxpay') {
					if (this.code.length) {
						//如果是自动获取车牌，不需要传入车牌号自己查价格
						if (this.outType == 'auto') {
							this.getPriceFunc(this.priceObj);
						} else {
							if (this.carNum.length) {
								this.priceObj.car_number = this.array[0][this.index[0]] + this.array[1][this.index[1]] +
									this
									.carNum;
								this.getPriceFunc(this.priceObj);
							} else {
								this.$helper.toast('请输入车牌号');
							}
						}
					} else {
						this.loginNow();
					}
				} else if (this.browserType == 'alipay') {
					if (this.outType == 'auto') {
						this.getPriceFunc(this.priceObj);
					} else {
						if (this.carNum.length) {
							this.priceObj.car_number = this.array[0][this.index[0]] + this.array[1][this.index[1]] + this
								.carNum;
							this.getPriceFunc(this.priceObj);
						} else {
							this.$helper.toast('请输入车牌号');
						}
					}
				}
			},

			//查询车牌 获取order_id方法
			getPriceFunc(params) {
				this.$api.getPrice(params).then(res => {
					console.log(res, '当前结果');
					if (res.code == 200) {
						this.getPriceResult = res.data;
					} else {
						this.$helper.toast(res.msg);
					}
				})
			},
			closePopup() {
				this.$refs.popup.close();
			},
			changePopup(val) {
				console.log(val, '当前模态框')
			},
			getCode(url) {
				const regex = /code=(.*?)(?:&|$)/;
				const match = url.match(regex);
				if (match) {
					this.code = match[1];
				}

				console.log(this.code, '当前code');
			},
			payNow() {
				let params = {
					...this.priceObj
				}
				params.order_id = this.getPriceResult.order_id;
				params.pay_type = this.browserType;
				if (this.browserType == 'wxpay') {
					params.code = this.code;
				}
				this.$api.createOrderPay(params).then(res => {
					console.log(res, '当前订单结果过');
					let that = this;
					if (res.code == 200) {
						if (this.browserType == 'wxpay') {
							WeixinJSBridge.invoke(
								"getBrandWCPayRequest", {
									appId: res.wxpay_string.appid, //公众号名称，由商户传入
									timeStamp: res.wxpay_string.time_stamp, //时间戳，自1970年以来的秒数
									nonceStr: res.wxpay_string.nonce_str, //随机串
									package: res.wxpay_string.package,
									signType: res.wxpay_string.sign_type, //微信签名方式：
									paySign: res.wxpay_string.sign, //微信签名
								},
								function(res) {
									if (
										res.err_msg == "get_brand_wcpay_request:ok"
									) {
										that.$helper.toast("支付成功");
										// this.$emit("getMyPayment", 2);
									} else {
										that.$helper.toast("支付失败");
									}
								}
							);
						} else {
							document.getElementById('big_box').innerHTML = res.alipay_string; // body对应上面的class
							this.$nextTick(() => {
								console.log(document.forms,
									"form"); //跳转之前,可以先打印看看forms,确保后台数据和forms正确,否则，可能会出现一些奇奇怪怪的问题 ╮(╯▽╰)╭
								document.forms['0'].submit(); //重点--这个才是跳转页面的核心,获取第一个表单并提交
							});
						}
					} else {
						that.$helper.toast(res.msg);
					}
				})
			},
			loginNow() {
				const hrefUrl =
					`http://admin.zhinh.cn/wap/#/pages/query/query?parkid=${this.priceObj.parkid}&pay_scene=${this.priceObj.pay_scene}&gateid=${this.priceObj.gateid}`;
				window.location.href = `
							https://open.weixin.qq.com/connect/oauth2/authorize
							?appid=wx59327bf399efa25e
							&redirect_uri=${encodeURIComponent(hrefUrl)}
							&response_type=code
							&scope=snsapi_userinfo
							&state=STATE#wechat_redirect
						`;
			},
			//判断浏览器类型
			checkEnvironment() {
				console.log(2222222);
				//alipay 支付宝  micromessenger 微信浏览器
				let userAgent = navigator.userAgent.toLowerCase();
				let isWeChat = userAgent.indexOf('micromessenger') !== -1;
				let isAlipay = userAgent.indexOf('alipay') !== -1;
				if (isWeChat) {
					this.browserType = 'wxpay'
				} else if (isAlipay) {
					this.browserType = 'alipay'
				} else {
					this.browserType = 'common'
				}
			}
		},
		computed: {
			btnTitle() {
				//微信支付需要登录并获取code码
				if (this.browserType == 'wxpay') {
					if (this.code.length) {
						return '查询价格'
					} else {
						return '登录'
					}

				} else
				//支付宝支付不需要code码
				{
					return '查询价格'
				}
			},
			canPay() {
				//如果是微信支付的话，必须有code码和订单号
				if (this.browserType == 'wxpay') {
					if (this.code.length && this.getPriceResult.order_id) {
						return true
					} else {
						return false
					}
				} else {
					//如果是支付宝支付的话，只需要订单号
					if (this.getPriceResult.order_id) {
						return true
					} else {
						return false
					}
				}

			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #fff;
		padding: 0 38rpx;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 100vw;
		box-sizing: border-box;

		.wrapper {
			margin-top: 298rpx;
			background-color: #f6f6f6;
			border-radius: 50rpx;
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			overflow: hidden;
			height: 100rpx;
			align-items: center;
			margin-bottom: 16rpx;

			.car_title {
				padding-left: 22rpx;
				font-size: 36rpx;
			}

			input {
				text-indent: 16rpx;
				font-size: 30rpx;
				color: #333;
				flex: 1;
			}

			.check_btn {
				background-color: #ffbb18;
				width: 180rpx;
				height: 100%;
				font-size: 12px;
				line-height: 100rpx;
				color: #333;
				border-radius: 0 21px 21px 0;
			}
		}

		.price_box {
			font-size: 44rpx;
			margin-bottom: 120rpx;
			font-weight: 700;
		}

		.pay_now {
			width: 100%;
			height: 100%;
			line-height: inherit;
			background-color: #ffbb18;
			border-radius: 17px;
			font-size: 13px;
			color: #333;
			font-weight: 500;
			height: 90rpx;
			line-height: 90rpx;
		}

		.btn_disabled {
			background-color: #f6f6f6;
			color: #999;
		}

		.login-popup {
			position: relative;
			width: 70vw;
			background: #fff;
			border-radius: 8px;
			padding: 40rpx 40rpx 50rpx;
			text-align: center;
			overflow: hidden;

			.popup_title {
				font-size: 38rpx;
			}

			.popup_tags {
				font-size: 28rpx;
				color: #888;
				margin: 26rpx 0rpx 70rpx;
			}

			.now_login {
				button {
					width: 80%;
					margin: 0 auto;
					border-radius: 16rpx;
					border: 1px solid #ffbb18;
					font-size: 30rpx;
				}
			}

			.close_btn {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				position: absolute;
				top: 10rpx;
				right: 10rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		#big_box {
			position: absolute;
			right: -150vw;
			top: 0;
		}
	}
</style>